﻿
@{
    ViewBag.Title = "RoleEdit";
    Layout = null;
}

<h2>RoleEdit</h2>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="~/Scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-sm" lay-on="getChecked">获取选中节点数据</button>
        <button type="button" class="layui-btn layui-btn-sm" lay-on="setChecked">勾选指定节点</button>
        <button type="button" class="layui-btn layui-btn-sm" lay-on="reload">重载实例</button>
    </div>

    <div id="ID-tree-demo"></div>

    <script src="~/Scripts/layui-v2.5.6/layui/layui.js"></script>
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script>
        layui.use(function () {
            var tree = layui.tree;
            var layer = layui.layer;
            var util = layui.util;

            //获取节点数据
            getTreeData();

            function getTreeData() {
                $.ajax({
                    url: "/Permission/GetTreeData",
                    type: "post",
                    dataType: "json",
                    data: {
                        "roleId": 1,
                        "id": null,
                        "t": Math.random()
                    },
                    error: function () {
                    },
                    success: function (data) {
                        treeData = JSON.stringify(data);

                        //初始化绑定树数据
                        initMenuTree();

                        //反填树节点
                        setNodeChecked();
                    }
                });
            }

            function initMenuTree() {

                //json数组转换成对象
                treeData = eval("(" + treeData + ")");

                // 渲染，是否联动子级节点，是否联动父级节点
                //如果需要初始化将tree节点展开，需要在model对象中增加属性：  spreed:true 即可
                tree.render({
                    elem: '#ID-tree-demo',
                    data: treeData,
                    showCheckbox: true,  // 是否显示复选框
                    onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                    id: 'demo-id-1',
                    isJump: true, // 是否允许点击节点时弹出新窗口跳转
                    checkChild: false,//是否联动子级节点
                    checkParent: false,//是否联动父级节点
                    click: function (obj) {
                        //var data = obj.data;  //获取当前点击的节点数据
                        //layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));

                        var childs = $(obj.elem).find('.' + "layui-tree-pack").find('input[same="layuiTreeCheck"]');
                        childs.each(function () {
                            this.checked = false;
                        });
                        form.render('checkbox');
                    }
                });
            }

            // 按钮事件
            util.event('lay-on', {
                getChecked: function (othis) {
                    var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据
                    layer.alert(JSON.stringify(checkedData), { shade: 0 });
                    console.log(checkedData);
                },
                setChecked: function () {
                    var tmpIds = [1, 6, 7]//反填时，只反填子级节点，不要反填父级节点（父级节点反填后，子级节点全部选中）
                    tree.setChecked('demo-id-1', tmpIds); // 勾选对应 id 值的节点
                },
                reload: function () {
                    tree.reload('demo-id-1', {}); // 重载实例
                }
            });

            //反填树节点
            function setNodeChecked() {
                var tmpIds = [5,6,7]//反填时，只反填子级节点，不要反填父级节点（父级节点反填后，子级节点全部选中）
                tree.setChecked('demo-id-1', tmpIds); // 勾选对应 id 值的节点
            }
        });
    </script>

</body>
</html>